<template>
  <div class="aui-wrapper aui-page__login">
    <div class="aui-content__wrapper">
      <div class="tex-cen">
          <img src="~@/assets/img/logo.png" class="logo">
          <div class="title">唤醒内网学习系统</div>
          <div class="title-desc">Wake up intranet learning system</div>
      </div>
      <main class="aui-content">
        <div class="login-body">
          <h3 class="login-title">用户名登录</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" status-icon>
            <el-form-item prop="username">
              <el-input v-model="dataForm.username" placeholder="请输入用户名" autocomplete="new-password">
                <template #prefix class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </template >
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="请输入密码" autocomplete="new-password">
                <template #prefix class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-password"></use></svg>
                </template>
              </el-input>
            </el-form-item>
            <div class="re-dio">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
              <el-form-item>
                <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">立即登录</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div class="login-footer">
          <p><a href="JavaScript:;" target="_blank">唤醒网络</a>2021 © Gy.io</p>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { ElMessage , ElLoading} from 'element-plus'
import { useStore } from 'vuex'
import {
  getCurrentInstance,
  reactive,
  ref,
  unref
} from 'vue'
export default {
  data () {
    return {
      captchaPath: '',
      dataForm: {
        username: 'HJun',
        password: '123456'
      },
      checked: false
    }
  },
  computed: {
    dataRule () {
      return {
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route(){
      location.reload()
    }
  },
  setup () {
    const router = useRouter()
    const dataFormRef = ref();
    const ctx = getCurrentInstance();
    const _this = ctx.appContext.config.globalProperties;
    const store = useStore();
    // 表单提交
    const dataFormSubmitHandle = async () => {
      const form = unref(dataFormRef)
      if (!form) {
        return
      }
      try {
        await form.validate()
        await ajaxLogin()

      } catch (err) {
        console.log(err)
      }
    }
    const ajaxLogin = () => {
      _this
        .$request({
          url: "/api/pcLogin/login_in",
          data: dataFormRef.value.model,
        })
        .then((res) => {
          if(res.code == 1){
              localStorage.setItem("token", res.data.token);
              // localStorage.user = JSON.stringify(res.data) 
              localStorage.role = res.data.group_id
              ElMessage.success({
                message: '登录成功',
                type: 'success'
              })
             goPage()

          }else{
            ElMessage.error(res.msg);
          }
        });
    }
    function goPage(){
              // 8 城市写手 7 城市审查 6 城市代理 2 平台携手 1 超管
        let role = localStorage.role
        if (role==8) {
          router.push({name:'myProduction'})
        }
    }
    //获取菜单栏
    // const menuList = () => {
    //   _this
    //     .$request({
    //       url: "/?s=Learn.Admin.AdminRoles",
    //       params: dataFormRef.value.model,
    //     })
    //     .then((res) => {
    //         localStorage.setItem("menuList", JSON.stringify(res.data.admin_roles));
    //     })
    // }
    return {
      dataFormSubmitHandle,
      dataFormRef,
      ajaxLogin,
      goPage,
    }
  }
}
</script>
<style scoped>
  .tex-cen{
    text-align: center;
    padding-top: 50px;
  }
  .title {
    color: #FFFFFF;
    font-size: 33px;
    padding-top: 30px;
    letter-spacing:2px
  }
  .title-desc {
    color: #FFFFFF;
    margin-top: 5px;
    letter-spacing:2px
  }
  .logo {
    width: 168px;
    height: 50px;
  }
  .re-dio{
    margin-top: 20px;
    text-align: left;
    margin-bottom: 40px;
  }
</style>
